﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="error">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>出错啦!</title>
    <link rel="stylesheet" th:href="@{/css/404.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>
    <script type="text/javascript">
        $(function () {
            let h = $(window).height();
            $('body').height(h);
            $('.mianBox').height(h);
            centerWindow(".tipInfo");
        });

        //2.将盒子方法放入这个方，方便法统一调用
        function centerWindow(arg) {
            center(arg);
            //自适应窗口
            $(window).bind('scroll resize',
                function () {
                    center(arg);
                });
        }

        //1.居中方法，传入需要居中的标签
        function center(arg) {
            var wWidth = $(window).width();
            var wHeight = $(window).height();
            var boxWidth = $(arg).width();
            var boxHeight = $(arg).height();
            var scrollTop = $(window).scrollTop();
            var scrollLeft = $(window).scrollLeft();
            var top = scrollTop + (wHeight - boxHeight) / 2;
            var left = scrollLeft + (wWidth - boxWidth) / 2;
            $(arg).css({
                "top": top,
                "left": left
            });
        }
    </script>
</head>
<body>
<div class="mianBox">
    <img th:src="@{/img/cloud1.png}" class="yun yun0"/>
    <img th:src="@{/img/cloud2.png}" class="yun yun1"/>
    <img th:src="@{/img/cloud3.png}" class="yun yun2"/>
    <img th:src="@{/img/bird.png}" class="bird"/>
    <img th:src="@{/img/parachuting.png}" class="san"/>
    <div class="tipInfo">
        <div class="in">
            <div class="textThis">
                <h2>[[${status}]]！</h2>
                <h2>[[${error}]]</h2>
                <p>
                    <a th:href="@{/index}" style="color: #e94c3c">返回首页</a>
                    <span>等待<b id="wait">3</b>秒</span></p>
            </div>
        </div>
    </div>
</div>

<script>

    // 定时器
    // $(function () {
    //     let wait = $("#wait").html();
    //     let interval = setInterval(function () {
    //         let second = --wait;
    //         $("#wait").html(second);
    //         if (second <= 0) {
    //             clearInterval(interval);
    //             location.href = "/index.html";
    //         }
    //     }, 1000);
    // });
</script>

</body>
</html>
